<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 搜索 新增 -->
      <el-row>
        <el-col :span="18"
          ><div class="grid-content bg-purple">
            <span style="padding-right: 12px">关键字</span>
            <el-input
              v-model="input"
              style="width: 200px; padding-right: 45px"
            ></el-input>
            <span style="padding-right: 12px">状态</span>
            <el-select
              v-model="value"
              placeholder="请选择"
              style="width: 200px; padding-right: 12px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-button size="medium" @click="clearDir">清除</el-button>
            <el-button type="primary" size="medium" @click="handleFilter"
              >搜索</el-button
            >
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light" style="float: right">
            <el-button type="success" size="small" @click="addSubjects">
              <i
                class="el-icon-edit"
                size="medium"
                style="padding-right: 5px"
              ></i>
              新增技巧
            </el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 数据条数
      <div class="amount">
        <i class="el-alert__icon el-icon-info"></i>
        <span style="padding-left: 8px">{{ alertText }}</span>
      </div> -->
      <!-- </el-col> -->
      <!-- </el-row> -->
      <!-- 数据条数-->
      <div class="amount">
        <i class="el-alert__icon el-icon-info"></i>
        <span style="padding-left: 8px">{{ alertText }}</span>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" show-header style="width: 100%">
        <el-table-column
          fixed
          type="index"
          prop="index"
          label="序号"
          width="100"
        >
        </el-table-column>
        <el-table-column label="文章标题">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
            <a
              v-if="scope.row.videoURL"
              href="javaScript:;"
              class="el-icon-film"
              @click="watchHandler(scope.row.videoURL)"
              style="margin-left: 3px; color: #00f; font-size: 18px"
            ></a>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column label="录入时间">
          <template slot-scope="scope">
            <span>{{
              scope.row.createTime | forMat('YYYY-MM-DD hh:mm:ss')
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.state === 1 ? '已启用' : '已禁用' }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="preview(scope.row.id)"
              >预览</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="stateHanderl(scope.row)"
              >{{ scope.row.state === 1 ? '禁用' : '启用' }}</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.state === 0 ? false : true"
              @click="edit(scope.row.id)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.state === 0 ? false : true"
              @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block" v-if="!$route.query.name">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.page"
          :total="total"
          :page-sizes="[5, 10, 30, 50]"
          :page-size="pagination.pagesize"
          layout="prev, pager,next,sizes,jumper"
        >
        </el-pagination>
      </div>
      <!-- 添加对话框 -->
      <el-dialog
        :title="isEdit ? '修改文章' : '新增文章'"
        :visible.sync="addDialogVisible"
        width="45%"
      >
        <DirDialog
          :isEdit="isEdit"
          :id="id"
          :subjectID="pagination.subjectID"
          v-if="addDialogVisible"
          @success="successHnaderl"
        />
      </el-dialog>
      <!-- 预览对话框 -->
      <el-dialog
        title="预览文章"
        :visible.sync="previewDialogVisible"
        width="45%"
      >
        <Dirpreview :id="id" v-if="previewDialogVisible" />
      </el-dialog>
      <!-- 视频对话框 -->
      <DirVideo
        v-if="videoDialogVisible"
        :videoDialogVisible="videoDialogVisible"
        :url="url"
        @close="closeHandler"
      />
      <!-- <el-dialog
  :visible.sync="videoDialogVisible"
  v-if="videoDialogVisible"
  width="45%" hight="45%">
  <video autoplay loop playsinline >
      <source :src="url" >
  </video>
</el-dialog> -->
    </el-card>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/articles'
import DirDialog from '@/module-hmmm/components/articles-add.vue'
import Dirpreview from '@/module-hmmm/components/articles-preview.vue'
import DirVideo from '@/module-hmmm/components/articles-video.vue'
export default {
  components: {
    DirDialog,
    Dirpreview,
    DirVideo
  },
  data () {
    return {
      input: '',
      tableData: [],
      total: null,
      alertText: '',
      pagination: {
        page: 1,
        total: 0,
        pagesize: 10,
        state: null,
        keyword: ''
      },
      isEdit: false,
      id: null,
      addDialogVisible: false,
      options: [
        {
          value: 1,
          label: ' 已启用 '
        },
        {
          value: 0,
          label: ' 已禁用 '
        }
      ],
      value: null,
      previewDialogVisible: false,
      videoDialogVisible: false,
      url: ''
    }
  },
  created () {
    this.getableData()
  },
  // watch: {
  //   $route: {
  //     handler (newVal, oldVal) {
  //       console.log('newVal, oldVal', newVal, oldVal)
  //       this.pagination.subjectID = null
  //       console.log('newVal, oldVal', newVal, oldVal)
  //       this.getableData()
  //     }
  //   }
  // },
  methods: {
    clearDir () {
      this.input = ''
      this.value = null
    },
    async getableData () {
      const { data: res } = await list(this.pagination)
      // console.log(res)
      // 获取数据给dataList
      this.tableData = res.items
      // 获取总条数
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      // 清空路由参数
      // this.$router.push({ query: {} })
      // this.pagination.subjectID = ''
    },
    // 搜索信息
    handleFilter () {
      this.pagination.keyword = this.input
      this.pagination.state = this.value
      this.pagination.page = 1
      this.getableData(this.pagination)
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.pagination.pagesize = val
      this.pagination.page = 1
      this.getableData(this.pagination)
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.pagination.page = val
      this.getableData()
    },
    // 新增文章
    addSubjects () {
      this.addDialogVisible = true
      this.isEdit = false
    },
    successHnaderl () {
      this.addDialogVisible = false
      this.getableData()
    },
    // 修改状态{id: 350, state: 0}
    async stateHanderl (row) {
      row.state = !row.state
      if (row.state) {
        row.state = 1
      } else {
        row.state = 0
      }
      const res = await changeState({ id: row.id, state: row.state })
      // console.log(res)
      if (res.status !== 200) {
        this.$message.success('操作成功')
      }
      // this.getableData()
    },
    // 预览文章
    preview (id) {
      this.previewDialogVisible = true
      this.id = id
    },
    // 修改文章
    edit (id) {
      this.addDialogVisible = true
      this.isEdit = true
      this.id = id
      // console.log(this.id)
    },
    // 删除文章
    del (id) {
      this.$confirm('此操作将永久删除该文章' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: id })
            .then((response) => {
              // console.log('1234', response)
              this.$message.success('删除成功了' + '!')
              this.getableData(this.pagination)
            })
            .catch((response) => {
              // console.log(response)
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    watchHandler (url) {
      this.videoDialogVisible = true
      this.url = url
    },
    closeHandler () {
      this.videoDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
// scoped
.box-card {
  padding: 5px 0;

  .amount {
    height: 40px;
    margin: 20px 0;
    padding: 12px 16px;
    border-radius: 5px;
    background-color: #f4f4f5;
    color: #909399;
  }
  .amount1 {
    height: 40px;
    margin-top: -22px;
    margin-bottom: 20px;
    padding: 12px 16px;
    border-bottom: #ccc solid 1px;
    background-color: #fff;
    color: #909399;
  }
  .block {
    float: right;
    margin: 15px 0;
  }
}
</style>
//
<style lang="scss" scoped>
//   // 视频
//     .el-dialog__wrapper {
//      ::v-deep .el-dialog {
//           .el-dialog__header {
//           background : transparent;
//           border-radius: 0 0;
//           padding:0 0 ;
//           .el-dialog__headerbtn {
//            position: absolute;
//            top: 5px;
//             right: 4px;
//             width: 17px;
//            height: 16px;
//            background: rgba(78, 77, 77, 0.6);
//            border-radius: 50%;
//            .el-dialog__close {
//              color: #fff;
//            }
//           }
//        }
//        .el-dialog__body {
//             padding: 20px 20px;
//             background: #ccc;
//             border-radius: 5px;
//        }
//      }
//     }
//
</style>
